<template>
    <div class="userInfoPage">
      <el-form class="addForm" ref="form" :model="form" :rules="rules" label-width="5vw">
        <div class="userInfoTitle">修改密码</div>
        <el-form-item label="旧密码：" prop="oldPassword">
          <el-input @input="changePassword()" v-model="form.oldPassword" placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <div class="errorText"><img src="@/assets/img/vectorClose.png" v-show="showOld" />{{oldText}}</div>
        <el-form-item label="新密码：" prop="password">
          <el-input :type="showEye ? 'password' : 'text'" v-model="form.password" placeholder="请输入新密码">
            <i slot="suffix" class="el-input__icon el-icon-open" v-if="!showEye" @click="showEye = !showEye"></i>
            <i slot="suffix" class="el-input__icon el-icon-turn-off" v-else @click="showEye = !showEye"></i>
          </el-input>
        </el-form-item>
        <div class="errorText"><img src="@/assets/img/vectorClose.png" v-show="showPassWord"/>{{passwordText}}</div>
        <el-form-item label="再次确认" prop="passwordCheck">
          <el-input :type="showEyes ? 'password' : 'text'" v-model="form.passwordCheck" placeholder="请再次输入新密码">
            <i slot="suffix" class="el-input__icon el-icon-open" v-if="!showEyes" @click="showEyes = !showEyes"></i>
            <i slot="suffix" class="el-input__icon el-icon-turn-off" v-else @click="showEyes = !showEyes"></i>
          </el-input>
        </el-form-item>
        <div class="errorText"><img src="@/assets/img/vectorClose.png" v-show="showCheck"/>{{checkText}}</div>
      </el-form>
      <div class="addBottom">
        <el-button
            size="small"
          class="editBtn editBtnNone"
          @click="back()"
          >取消</el-button
        >
        <el-button
          class="editBtn"
          type="primary"
          size="small"
          @click="submit()"
          >确定</el-button
        >
      </div>
    </div>
  </template>

<script>
// import upload from '@/views/agriMissionAdd/components/upload.vue'
import { updataUserApi } from '@/api/user'
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  data () {
    return {
      form: {
        password: '',
        oldPassword: '',
        passwordCheck: ''
      },
      checkText: '',
      passwordText: '',
      oldText: '',
      showOld: false,
      showPassWord: false,
      showCheck: false,
      rules: {},
      showEye: true,
      showEyes: true
    }
  },
  components: {
    // upload
  },
  watch: {

  },
  mounted () {

  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    // 密码验证
    changePassword () {
      this.showOld = false
      this.oldText = ''
      if (!this.form.oldPassword) {
        this.oldText = '请输入旧密码'
        this.showOld = true
        return
      }
      if (!(/^[a-zA-Z0-9]{6,12}$/.test(this.form.oldPassword))) {
        this.oldText = '请输入6-12位数字、英文组合'
        this.showOld = true
        return false
      }
      if (this.form.oldPassword !== decrypt(this.$store.getters.userInfo.password)) {
        this.oldText = '输入旧密码不正确'
        this.showOld = true
        return false
      }
    },
    async submit () {
      // 手动重置
      this.showOld = false
      this.showPassWord = false
      this.showCheck = false
      this.oldText = ''
      this.passwordText = ''
      this.checkText = ''
      if (!this.form.oldPassword) {
        this.oldText = '请输入旧密码'
        this.showOld = true
      }
      if (this.form.oldPassword !== decrypt(this.$store.getters.userInfo.password)) {
        this.oldText = '输入旧密码不正确'
        this.showOld = true
      }
      if (!(/^[a-zA-Z0-9]{6,12}$/.test(this.form.oldPassword))) {
        this.oldText = '请输入6-12位数字、英文组合'
        this.showOld = true
      }
      if (!this.form.password) {
        this.passwordText = '请输入新密码'
        this.showPassWord = true
      }
      if (!this.form.passwordCheck) {
        this.checkText = '请输入确认密码'
        this.showCheck = true
        return
      }
      if (this.form.password && !(/^[a-zA-Z0-9]{6,12}$/.test(this.form.password))) {
        this.passwordText = '请输入6-12位数字、英文组合'
        this.showPassWord = true
      }
      if (this.form.password === this.form.oldPassword) {
        this.passwordText = '新密码和旧密码不能一样'
        this.showPassWord = true
      }
      if (this.form.password !== this.form.passwordCheck) {
        this.checkText = '两次输入的新密码不一致'
        this.showCheck = true
      }
      if (!this.showOld && !this.showPassWord && !this.showCheck) {
        const userInfo = {
          ...this.$store.getters.userInfo,
          password: this.form.password
        }
        const res = await updataUserApi(userInfo)
        if (res.code === 200) {
          this.$message.success(res.msg)
          userInfo.password = encrypt(userInfo.password)
          this.$store.dispatch('user/updataUserInfo', userInfo)
          this.$router.go(-1)
        } else {
          this.checkText = res.msg
          this.showCheck = true
        }
      }
    }
  }
}
</script>
  <style lang="scss" scoped>
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
  .errorText {
    margin-left: 5vw;
    color: #F76560;
    font-size: 0.7vw;
    display: flex;
    align-items: center;
    height: 3.8vh;
    img {
      width: 0.8vw;
      height: 0.8vw;
      margin-right: 0.5vw
    }
  }
  .errorMargin {
    margin-left: 0.6vw
  }
  .addBottom {
    position: absolute;
    bottom: -0.3rem;
    left: -0.36rem;
    width: calc(100% + 0.25rem + 0.36rem);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7vh;
    box-shadow: 0px -4px 8px 0px rgba(0,0,0,0.05);
  }
  .userInfoPage {
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    position: relative;
    height: 100%;
  }
  ::v-deep .el-input__inner {
    width: 14vw !important;
    height: 3.8vh;
  }
  ::v-deep .el-form-item__label {
  }
  .flexInput {
    display: flex;
    align-items: center;
  }
  .editBtn {
    background: #00C586;
    border-radius: 3px;
  }
  .editBtnNone {
    background: none;
    color: #666666;
    border-color: #00C586;
    margin-right: 0.3vw
  }
  .userInfoTitle {
    font-size: 1.1vw;
    font-weight: 500;
    text-align: center;
    margin: 4vh 0;
  }
  </style>
